<template>
    <el-drawer :title="title" :visible.sync="visible" :size="size" class="container" :closed="close">

        <div class="clearfix" style="margin-bottom:10px">
            <div class="left" style="width:80%">
                <el-button size="small" type="primary" class="left" @click="downloadExcelTemp">下载模板
                </el-button>
                <el-upload ref="upload" class="left" style="margin-left:10px;" :before-upload="handleUpload"
                    action="uploadUrl" :show-file-list="false" :accept="accept">
                    <el-button slot="trigger" size="small">上传Excel文件</el-button>
                </el-upload>
                <div class="filename" v-if="filename">当前选择文件：<span>{{filename}}</span></div>
            </div>
            <div class="right">
                <el-button size="small" @click="clearData">清空数据</el-button>
            </div>
        </div>

        <div>
            <el-alert title="错误提示" type="error"
                description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
            </el-alert>
        </div>
        <div class="data-container">
            <!-- <div class="data">
            </div> -->
            <el-table v-bind="table">
                <el-table-column v-for="(item, index) in table.columns" :key="index" :prop="item.prop"
                    :label="item.label">
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom">
            <el-button size="small" type="primary" class="submit" @click="submitUpload">
                确定导入({{table.data.length || 0}})条数据
            </el-button>
        </div>
        <!-- 模板列表 -->
        <import-template v-if="importtemplate" ref="importtemplate"></import-template>
    </el-drawer>
</template>
<script>
    import ImportTemplate from './template'
    import util from '@/libs/util'
    import request from '@/plugin/axios'

    export default {
        props: {
            code: {
                type: String,
                required: true
            },
            url: {
                type: String,
                required: true
            },
            size: {
                type: [String, Number],
                default: '80%'
            },
            title: {
                type: String,
                default: '数据导入'
            }
        },
        components: {
            ImportTemplate
        },
        data() {
            return {
                visible: false,
                importtemplate: false,
                filename: '',
                uploadWaitFile: undefined,
                accept: '.xlsx,.xls',
                table: {
                    columns: [],
                    data: [],
                    size: 'mini',
                    stripe: true,
                    border: true
                }
            }
        },
        methods: {
            init() {
                this.$nextTick(() => {
                    this.visible = true
                })
            },
            handleUpload(file) {
                if (file) {
                    this.filename = file.name
                    this.uploadWaitFile = file
                    this.$import.xlsx(file)
                        .then(({
                            header,
                            results
                        }) => {
                            this.table.columns = header.map(e => {
                                return {
                                    label: e,
                                    prop: e
                                }
                            })
                            this.table.data = results
                        })
                }
                return false
            },
            downloadExcelTemp() {
                if (this.$isNotEmpty(this.code)) {
                    this.importtemplate = true
                    this.$nextTick(() => {
                        this.$refs.importtemplate.init(this.code)
                    })
                } else {
                    this.$alert("缺少模板编码")
                }
            },
            submitUpload() {
                if (!this.uploadWaitFile) {
                    this.$message.error("文件错误！");
                }

                // 文件对象
                let formData = new FormData() // 创建form对象 
                formData.append('file', this.uploadWaitFile);
                // // formData.append('ceshi', '1');
                // usergroupService.usergroupImport(formData).then(data => {
                //     console.log(data)
                //     this.$message.success("导入成功！");
                // })

                request({
                    url: this.url,
                    method: "post",
                    data: formData
                }).then(({
                    data
                }) => {
                    this.$message.success("组建内导入成功！");
                    this.$emit('getDataTable');
                    this.clearData()
                });
                // this.$emit('callback',this.uploadWaitFile)
            },
            clearData() {
                this.$refs.upload.clearFiles();
                this.table = {
                    columns: [],
                    data: [],
                    size: 'mini',
                    stripe: true,
                    border: true
                }
            },
            close() {
                this.drawer = false
            }
        }
    }
</script>
<style scoped>
    .data-container {
        position: relative;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }

    .filename {
        font-size: 12px;
        display: inline-block;
        line-height: 32px;
        height: 32px;
        white-space: nowrap;
        cursor: pointer;
        color: #606266;
        margin-left: 10px;
    }

    .data-container {
        margin-top: 10px;
        margin-bottom: 10px;
        height: calc(100vh - 240px);
        overflow-y: auto;
    }

    .data {
        height: 1000px;
        background: cornflowerblue;
    }

    .bottom {
        border-top: 1px solid #e8e8e8;
        padding: 10px 20px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
    }

    .bottom .submit {
        float: right;
        /* margin-right:20px; */
    }
</style>